<template>
    <div class="production-plan">
        <!-- 页面标题和操作按钮 -->
        <div class="page-header">
            <div class="header-title">
                <h2>生产计划管理</h2>
                <p>管理和监控生产计划的执行情况</p>
            </div>
            <div class="header-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增计划
                </el-button>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="searchForm" :inline="true" class="search-form">
                <el-form-item label="计划编号">
                    <el-input v-model="searchForm.planNo" placeholder="请输入计划编号" clearable />
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="待执行" value="pending" />
                        <el-option label="执行中" value="running" />
                        <el-option label="已完成" value="completed" />
                        <el-option label="已暂停" value="paused" />
                    </el-select>
                </el-form-item>
                <el-form-item label="计划日期">
                    <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button @click="handleReset">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据统计卡片 -->
        <div class="stats-section">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.total }}</div>
                            <div class="stat-label">总计划数</div>
                        </div>
                        <el-icon class="stat-icon" color="#409EFF">
                            <Document />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.running }}</div>
                            <div class="stat-label">执行中</div>
                        </div>
                        <el-icon class="stat-icon" color="#67C23A">
                            <Timer />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.completed }}</div>
                            <div class="stat-label">已完成</div>
                        </div>
                        <el-icon class="stat-icon" color="#E6A23C">
                            <CircleCheck />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.pending }}</div>
                            <div class="stat-label">待执行</div>
                        </div>
                        <el-icon class="stat-icon" color="#F56C6C">
                            <Clock />
                        </el-icon>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 数据表格 -->
        <el-card class="table-card" shadow="never">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="planNo" label="计划编号" width="120" />
                <el-table-column prop="productName" label="产品名称" width="150" />
                <el-table-column prop="productModel" label="产品型号" width="120" />
                <el-table-column prop="quantity" label="计划数量" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.quantity.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="completedQuantity" label="完成数量" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.completedQuantity.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column label="完成进度" width="120">
                    <template #default="scope">
                        <el-progress :percentage="Math.round((scope.row.completedQuantity / scope.row.quantity) * 100)"
                            :color="getProgressColor(scope.row.completedQuantity / scope.row.quantity)" />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="startDate" label="开始日期" width="120" />
                <el-table-column prop="endDate" label="结束日期" width="120" />
                <el-table-column prop="priority" label="优先级" width="100">
                    <template #default="scope">
                        <el-tag :type="getPriorityType(scope.row.priority)" size="small">
                            {{ getPriorityText(scope.row.priority) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="success" size="small" @click="handleView(scope.row)">
                            查看
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
    Plus,
    Search,
    Refresh,
    Document,
    Timer,
    CircleCheck,
    Clock
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
    planNo: '',
    productName: '',
    status: '',
    dateRange: []
})

// 统计数据
const stats = reactive({
    total: 156,
    running: 23,
    completed: 89,
    pending: 44
})

// 表格数据
const tableData = ref([
    {
        id: 1,
        planNo: 'P202401001',
        productName: '智能手机A1',
        productModel: 'SM-A1-128G',
        quantity: 5000,
        completedQuantity: 3200,
        status: 'running',
        startDate: '2024-01-15',
        endDate: '2024-01-25',
        priority: 'high'
    },
    {
        id: 2,
        planNo: 'P202401002',
        productName: '平板电脑B2',
        productModel: 'TB-B2-64G',
        quantity: 2000,
        completedQuantity: 2000,
        status: 'completed',
        startDate: '2024-01-10',
        endDate: '2024-01-20',
        priority: 'medium'
    },
    {
        id: 3,
        planNo: 'P202401003',
        productName: '智能手表C3',
        productModel: 'SW-C3-BT',
        quantity: 8000,
        completedQuantity: 0,
        status: 'pending',
        startDate: '2024-01-20',
        endDate: '2024-01-30',
        priority: 'low'
    }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(156)

// 获取状态类型
const getStatusType = (status: string) => {
    const typeMap: Record<string, string> = {
        pending: 'info',
        running: 'warning',
        completed: 'success',
        paused: 'danger'
    }
    return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
    const textMap: Record<string, string> = {
        pending: '待执行',
        running: '执行中',
        completed: '已完成',
        paused: '已暂停'
    }
    return textMap[status] || '未知'
}

// 获取优先级类型
const getPriorityType = (priority: string) => {
    const typeMap: Record<string, string> = {
        low: 'info',
        medium: 'warning',
        high: 'danger'
    }
    return typeMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
    const textMap: Record<string, string> = {
        low: '低',
        medium: '中',
        high: '高'
    }
    return textMap[priority] || '未知'
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
    if (percentage < 0.3) return '#f56c6c'
    if (percentage < 0.7) return '#e6a23c'
    return '#67c23a'
}

// 处理搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm)
    // 这里应该调用API进行搜索
    ElMessage.success('搜索完成')
}

// 处理重置
const handleReset = () => {
    Object.assign(searchForm, {
        planNo: '',
        productName: '',
        status: '',
        dateRange: []
    })
    ElMessage.success('重置完成')
}

// 处理新增
const handleAdd = () => {
    console.log('新增生产计划')
    ElMessage.info('打开新增生产计划对话框')
}

// 处理编辑
const handleEdit = (row: any) => {
    console.log('编辑:', row)
    ElMessage.info(`编辑计划: ${row.planNo}`)
}

// 处理查看
const handleView = (row: any) => {
    console.log('查看:', row)
    ElMessage.info(`查看计划详情: ${row.planNo}`)
}

// 处理删除
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确认删除生产计划 "${row.planNo}" 吗？`,
        '确认删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        console.log('删除:', row)
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page
    console.log('当前页:', page)
}

// 处理每页条数变化
const handleSizeChange = (size: number) => {
    pageSize.value = size
    console.log('每页条数:', size)
}

onMounted(() => {
    console.log('生产计划页面已加载')
})
</script>

<style scoped>
.production-plan {
    padding: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.header-title h2 {
    margin: 0 0 5px 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-title p {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    margin-bottom: 0;
}

.stats-section {
    margin-bottom: 20px;
}

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card :deep(.el-card__body) {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.stat-icon {
    font-size: 40px;
    opacity: 0.8;
}

.table-card {
    margin-bottom: 0;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
